<template>
 <div class="conten-search">
        <el-form ref="ruleForm"  :model="form" :rules="rules" label-width="100px">
     		<el-row :gutter="15">
                <el-col :lg="4"  >
					<el-form-item label="开始时间：" prop="startTime">
	   <el-date-picker
        v-model="form.startTime"
        type="date"
        placeholder="请输入开始时间"
        format="YYYY-MM-DD"
         value-format="YYYY-MM-DD"
		 @change="comparison"
      /> 
			      	</el-form-item>
					   </el-col>
					                  <el-col :lg="4"  >
					  					<el-form-item label="结束时间：" prop="endTime">
	   <el-date-picker
        v-model="form.endTime"
        type="date"
        placeholder="请输入开始时间"
		        format="YYYY-MM-DD"
         value-format="YYYY-MM-DD"
		 @change="comparison"
      />
			      	</el-form-item>
            </el-col>
                <el-col :lg="4" >
					<el-form-item label="省市："  prop="areaIds" label-width="80px">
                <sc-select v-model="form.areaIds"  clearable filterable style="width: 220px"></sc-select>
				    </el-form-item>
             </el-col>
             <el-col :lg="4" :class="btnTOP?'m15':''">
             		<el-form-item  label-width="20px">
					<el-button type="primary" @click="submitForm">查询</el-button>
					<el-button @click="resetForm">清空</el-button>
				</el-form-item> 
             </el-col>

				<!-- <el-form-item label="表格" prop="list">
				</el-form-item>
-->


            <!-- <el-col :lg="6">
			</el-col>
                        <el-col :lg="6">
			</el-col> -->
		</el-row>
        			</el-form>
 </div>
</template>

<script>
export default {
	data() {
		return {
			form: {
                startTime:'',
				endTime:'',
                areaIds:[],
				btnTOP:false
			},
		}
	},
	created(){
          if (window.screen.width < 500) { 
			  console.log(this.btnTOP)
                     this.btnTOP = true
              }else{
				   
                     this.btnTOP = false
					 console.log(this.btnTOP)
             }
	},
	mounted(){
    window.addEventListener('resize', () => {
            if (window.screen.width < 500) { 
                     this.btnTOP = true
					 
              }else{
                     this.btnTOP = false
             }
      })
	},
	methods: {
		submitForm() {
		console.log(this.form)
		this.comparison(this.form.startTime,this.form.endTime)
		this.$emit('search',this.form)
			// this.$refs.ruleForm.validate((valid) => {
			// 	if (valid) {
			// 		alert('请看控制台输出')
			// 		console.log(this.form)
			// 	} else {
			// 		return false
			// 	}
			// })

		},
		resetForm() {
			this.$refs.ruleForm.resetFields()
		},
		// 开始时间不能晚于结束时间
		comparison(){
			console.log(this.form)
            if(this.form.startTime!==''&&this.form.endTime!==''){
          var start = new Date(this.form.startTime).getTime();; //时间对象
		  var end = new Date(this.form.endTime).getTime(); //时间对象
		  console.log(this.form.startTime,this.form.endTime,end,start)
                    if(end<start){
                        this.$alert( '结束时间不能早于开始时间', "提示", {type: 'error'})
						this.form.endTime = ''
					}
			}
		}

	}

}
</script>

<style scoped>
.from-se{
    display: flex;
    height: 100%;
}
.conten-search{
    width: 100%;
    /* padding-top: 20px; */
}
/deep/.el-form-item{
  margin: 0 !important;
}
.m15{
margin-top: 15px;
}
</style>